<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" href="/assets/css/amazeui.flat.min.css"/>
</head>
<body>
<div class="am-container" style="margin-top: 100px">
    <form class="am-form" id="forget-form">
        <fieldset>
            <legend><%= title%></legend>
            <div class="am-form-group">
                <label for="loginName">账号</label>
                <input type="text" id="loginName" name="loginName"
                       placeholder="请输入账号" data-validate-async required  />
                <input type="text" id="uId" name="uId" style="display: none">
            </div>
            <button id="registerSubmit" class="am-btn am-btn-secondary" type="submit">找回密码</button>
        </fieldset>
    </form>
</div>
</body>
<script src="/js/jquery.js"></script>
<script src="/assets/js/amazeui.min.js"></script>
<script>
    $(function() {
        /**
         * 初始化进度条
         */
        var progress = $.AMUI.progress;
        progress.configure({
            minimum: 0.1,
            easing: 'ease-in-out',
            positionUsing: '',
            speed: 200,
            trickle: true,
            trickleRate: 0.02,
            trickleSpeed: 800,
            showSpinner: true,
            barSelector: '[role="nprogress-bar"]',
            spinnerSelector: '[role="nprogress-spinner"]',
            parent: 'body',
            template: '<div class="nprogress-bar" role="nprogress-bar">' +
            '<div class="nprogress-peg"></div></div>' +
            '<div class="nprogress-spinner" role="nprogress-spinner">' +
            '<div class="nprogress-spinner-icon"></div></div>'
        })

        /**
         * 表单验证
         */
        $('#forget-form').validator({
            validate: function(validity) {

                // Ajax 验证
                if ($(validity.field).is('#loginName')) {

                    if($(validity.field).val() == ""){
                        validErr(validity.field,"账号不能为空!");
                        validity.valid = false;
                        return validity;
                    }

                    // 异步操作必须返回 Deferred 对象
                    return $.ajax({
                        url: '/users/checkIsExit',
                        cache: false, //实际使用中请禁用缓存
                        dataType: 'json',
                        data:{loginName:$(validity.field).val()}
                    }).then(function(data) {
                        if(data.resultCode != 0){
                            validSuccess(validity.field);
                            $("#uId").val(data.message.id);
                            validity.valid = true;
                        }else{
                            validErr(validity.field,data.resultObj);
                            validity.valid = false;
                        }
                        return validity;
                    }, function() {
                        validity.valid = false;
                        return validity;
                    });
                }

            },
            submit: function(e) {
                e.preventDefault();
                var formValidity = this.isFormValid();
                $.when(formValidity).then(function () {
                    progress.inc();
                    // 验证成功的逻辑
                    return $.ajax({
                        url: '/users/forgetPwd',
                        cache: false, //实际使用中请禁用缓存
                        dataType: 'json',
                        type:"get",
                        data:$("#forget-form").serialize(),
                    }).then(function(data) {
                        if(data.resultCode == 0){
                            progress.done();
                            setTimeout(function(){
                                alert("验证邮件已发送至 "+data.resultObj.email+" ,请查收!");
                            },0);
                        }else{
                            progress.done();
                            setTimeout(function(){
                                alert(data.message);
                            },0);
                        }
                    },function(data){
                        progress.done();
                        alert("网络异常!");
                    })
                }, function () {
                    // 验证失败的逻辑
                    console.log("error")
                });
            }
        });


        function validSuccess(target) {
            $(target).closest('.am-form-group').find('.am-alert').hide();
        }
        function validErr(target,message){
            var $field = $(target);
            var $group = $field.closest('.am-form-group');
            var $alert = $group.find('.am-alert');
            // 使用自定义的提示信息 或 插件内置的提示信息
            var msg =message || "";

            if (!$alert.length) {
                $alert = $('<div class="am-alert am-alert-danger"></div>').hide().
                appendTo($group);
            }

            $alert.html(msg).show();
        }
    });
</script>
</html>